<template>
  <div class="device-add">
    <el-card>
      <div slot="header">
        <span>添加设备</span>
      </div>
      <el-alert v-if="error" :title="error" type="error" show-icon></el-alert>
      <el-form :model="deviceForm" :rules="rules" ref="deviceForm" label-width="100px">
        <el-form-item label="设备ID" prop="device_id">
          <el-input v-model.number="deviceForm.device_id" name="device_id" placeholder="请输入设备ID" aria-label="设备ID" title="设备ID"></el-input>
        </el-form-item>
        <el-form-item label="设备名称" prop="name">
          <el-input v-model="deviceForm.name" name="name" placeholder="请输入设备名称" aria-label="设备名称" title="设备名称"></el-input>
        </el-form-item>
        <el-form-item label="设备类型" prop="type">
          <el-select v-model="deviceForm.type" name="type" placeholder="请选择设备类型" aria-label="设备类型" title="设备类型">
            <el-option label="传感器" value="sensor"></el-option>
            <el-option label="控制器" value="controller"></el-option>
            <el-option label="执行器" value="actuator"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备状态" prop="status">
          <el-select v-model="deviceForm.status" name="status" placeholder="请选择设备状态" aria-label="设备状态" title="设备状态">
            <el-option label="在线" value="online"></el-option>
            <el-option label="离线" value="offline"></el-option>
            <el-option label="故障" value="fault"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在房间" prop="room">
          <el-input v-model="deviceForm.room" name="room" placeholder="请输入所在房间" aria-label="所在房间" title="所在房间"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm" :loading="loading" aria-label="添加设备" title="添加设备">添加设备</el-button>
          <el-button @click="resetForm" aria-label="重置表单" title="重置表单">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { addDevice } from '../../services/device.js'

export default {
  name: 'DeviceAdd',
  data() {
    return {
      loading: false,
      error: '',
      deviceForm: {
        device_id: '',
        name: '',
        type: '',
        status: '',
        room: ''
      },
      rules: {
        device_id: [
          { required: true, message: '请输入设备ID', trigger: 'blur' },
          { type: 'number', message: '设备ID必须为数字', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入设备名称', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择设备类型', trigger: 'change' }
        ],
        status: [
          { required: true, message: '请选择设备状态', trigger: 'change' }
        ],
        room: [
          { required: true, message: '请输入所在房间', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async submitForm() {
      this.loading = true;
      this.error = '';
      try {
        const valid = await this.$refs.deviceForm.validate()
        if (valid) {
          const response = await addDevice(this.deviceForm)
          if (response.code === 200) {
            this.$message.success('添加设备成功')
            this.resetForm()
          } else {
            this.error = response.msg || '添加设备失败'
            this.$message.error(this.error)
          }
        }
      } catch (error) {
        console.error('添加设备失败:', error)
        this.error = '无法连接到服务器，请检查网络连接或联系管理员'
        this.$message.error(this.error)
      } finally {
        this.loading = false;
      }
    },
    resetForm() {
      this.$refs.deviceForm.resetFields()
    }
  }
}
</script>

<style scoped>
.device-add {
  padding: 20px;
  /* Add vendor prefixes for better cross-browser compatibility */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: -webkit-fill-available;
  width: stretch;
}
</style>